<template>
	<!-- 分类选项卡 -->
	<view class="tab-strickt">
		<u-tabs active-color="#2979ff" :list="categoryList" name="categoryName" :is-scroll="true"
			v-model="currentCategory" @change="changeCategory"></u-tabs>
	</view>

	<!-- 商品列表 -->
	<view class="goods-container">
		<u-waterfall v-model="goodsList" ref="refwaterfall">
			<template v-slot:left="{leftList}">
				<view class="goods-item" v-for="(item, index) in leftList" :key="'left'+index"
					@click="navigateToDetail(item)">
					<u-lazy-load threshold="-450" border-radius="8" :image="item.image.split(',')[0]" :index="index"
						img-mode="aspectFill"></u-lazy-load>
					<view class="goods-info">
						<view class="title u-line-2">{{item.goodsName}}</view>
						<view class="price">¥{{item.price}}</view>
						<view class="meta">
							<text class="category">{{item.categoryName}}</text>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="goods-item" v-for="(item, index) in rightList" :key="'right'+index"
					@click="navigateToDetail(item)">
					<u-lazy-load threshold="-450" border-radius="8" :image="item.image.split(',')[0]" :index="index"
						img-mode="aspectFill"></u-lazy-load>
					<view class="goods-info">
						<view class="title u-line-2">{{item.goodsName}}</view>
						<view class="price">¥{{item.price}}</view>
						<view class="meta">
							<text class="category">{{item.categoryName}}</text>
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getCategoryApi,

	} from '../../api/category.js'

	import {
		getGoodsByCategoryApi
	} from '../../api/goods.js'
	const currentCategory = ref(0)


	const loadStatus = ref('loadmore')

	// 加载状态配置
	const iconType = ref('circle')
	const loadText = ref({
		loadmore: '上拉加载更多',
		loading: '正在加载...',
		nomore: '已经到底啦~'
	})

	const categoryList = ref([])
	// 获取分类列表
	const fetchCategories = async () => {
		const res = await getCategoryApi()
		if (res && res.code === 200) {

			console.log(res)
			categoryList.value = res.data

			// 添加"全部"选项
			categoryList.value.unshift({
				name: '全部',
				categoryId: 0,
				serialNum: 0
			})
			fetchGoodsList()
		}
	}
	const refwaterfall = ref()

	const categoryId = ref(0)
	// 切换分类
	const changeCategory = (index) => {
		console.log('切换分类:', index, '当前分类ID:', categoryList.value[index].categoryId)
		categoryId.value = categoryList.value[index].categoryId
		console.log(categoryId.value)
		// 重置页码和商品列表
		currentPage.value = 1
		refwaterfall.value.clear()

		fetchGoodsList()
	}

	const goodsList = ref([])
	const currentPage = ref(1)
	const pageSize = ref(10)
	const pages = ref(0)
	// 获取商品列表瀑布流数据
	const fetchGoodsList = async () => {
		loadStatus.value = 'loading'
		try {
			let res = await getGoodsByCategoryApi({
				currentPage: currentPage.value,
				pageSize: pageSize.value,
				categoryId: categoryId.value
			})
			console.log(res)
			if (res && res.code == 200) {
				goodsList.value = [...goodsList.value, ...res.data.records]
				pages.value = res.data.pages
				loadStatus.value = res.data.current < res.data.pages ? 'loadmore' : 'nomore'


			}
		} catch (error) {
			console.error('加载失败:', error)
			loadStatus.value = 'loadmore'
		}
	}

	// 点击商品跳转时
	const navigateToDetail = (item) => {
		uni.navigateTo({
			url: `/pages/detail/detail?goods=` + JSON.stringify(item)
		})
	}

	// 加载更多
	const loadMore = () => {
		if (loadStatus.value === 'loadmore') {
			currentPage.value++
			fetchGoodsList()
		}
	}
	onReady(() => {
		fetchCategories()
		fetchGoodsList()
	})

	onReachBottom(() => {
		loadMore()
	})
</script>

<style lang="scss">
	.tab-strickt {
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: #fff;
	}

	.goods-container {
		padding: 20rpx;

		.goods-item {
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

			.goods-info {
				padding: 20rpx;

				.title {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
					margin-bottom: 10rpx;
				}

				.price {
					font-size: 32rpx;
					color: #f56c6c;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.meta {
					display: flex;
					font-size: 24rpx;
					color: #999;

					.category {
						flex: 1;
					}
				}
			}
		}
	}
</style>